@import './commonM/_crumbs.less';
@import './commonM/_brandDetailImgText.less';
@import './commonM/_search.less';
@import './commonM/_infiniteScroll.less';

.brand-detail{
	.brand{
		margin:40px 0 42px 0;
		.logo{
			margin:0 0 8px 0;
			img{
				width:195px;
				height: 195px;
				display:block;
			}
			.logo-show{
				display: block;
				width: 195px;
				height: 195px;
				overflow: hidden;
				margin:0 auto;
			}
			.attention{
				display: flex;
				justify-content: space-between;
			}
			em{
				font-size: 16px;
				font-family: Roboto-Medium, Roboto;
				font-weight: 500;
				color: #121212;
				line-height: 24px;
			}
			i{
				width: 20px;
			    height: 22px;
			    display: inline-block;
			    cursor: pointer;
			    background: url(../images/home/heart@2x.png) no-repeat center center / 20px auto;
			    &.hov{
			    	background:url(../images/home/heart-fill@2x.png) no-repeat center center / 20px auto
			    }
			}
		}
		.date{
			margin:0 0 15px 0;
			font-size: 12px;
			display: flex;
    		align-items: center;
			img{
				width: 28px;
				height: 28px;
				margin:0 5px 0 0;
				border-radius: 10px;
			}
			em{
				color:#177FE9;
			}
		}
		p{
			font-size: 14px;
			line-height: 24px;
			margin:0 0 30px 0;
		}
		.detail-ellipsis{
			display:-webkit-box; 
		    -webkit-line-clamp:5;
		    -webkit-box-orient:vertical;
		    overflow:hidden;
		}
		.view-more{
			color: #177FE9;
			letter-spacing: 0.5px;
			text-align: center;
			background-image: linear-gradient(180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 20%, #FFFFFF 59%, #FFFFFF 100%);
			font-family:'Roboto-Medium';
			height: 40px;
			line-height: 40px;
			text-align: center;
			margin:-14px -24px 0;
			display: block;
			font-size:14px;
			background-size:375px 40px;
			position: relative;
			&.down{
				margin-top:24px;
			}
			i{
				display:inline-block;
				width:10px;
				height:5.8px;
				background-image: url("../images/index/mobile/down@3x.png");
				background-size:10px 5.8px;
				margin-left:8px;
			}
			&.down{
		    	i{
					background-image: url("../images/index/up@2x.png");
		    	}
		    }
		}
	}
	.recommend{
		font-size: 16px;
		font-family: Roboto-MediumItalic, Roboto;
		font-weight: normal;
		color: #121212;
		line-height: 16px;
	    font-style: italic;
	    padding: 8px 0 15px 0;
	    border-top: 1px solid #121212;
	    text-transform: uppercase;
	}
	.favorite-box{
		margin:0 0 30px 0;
	}
	.products-content{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin:0 0 65px 0;
    }
    .search{
    	margin:0 0 15px 0;
    }
    .products-box{
	    width: 154px;
    	margin:0 0 26px 0;
	    .products-box-img{
	        width: 154px;
	        height: 154px;
	        border-radius: 10px;
	        overflow: hidden;
	        margin:0 0 8px 0;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        img{
	            width: 154px;
	            min-height: 154px;
	            height: auto;
	            display: block;
	        }
	    }
	}
	.products-box-tips{
	    h4{
	        span{
	           	display: none;
	        }
	    }
	    .descrption{
	    	width: 154px;
			font-size: 13px;
			font-family: Roboto-Medium, Roboto;
			font-weight: 500;
			color: #000000;
			line-height: 16px;
	        display: block;
	        margin:0 0 8px 0;
	        -webkit-line-clamp:2;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-box-orient: vertical;
	    }
	    .tips{
			font-size: 12px;
			color: #666666;
			line-height: 18px;
	        a.price{
				font-size: 14px;
				font-family: Roboto-Medium, Roboto;
				font-weight: 500;
				line-height: 14px;
				color:#FF4B68;
	        }
	        p{
	        	margin:0 0 8px 0;
	        	display: block;
	        	a{
	        		color:#666;
	        		word-break: break-all;
	        	}
	        	em{
					color:#177FE9;
					font-family: Roboto-Medium, Roboto;
				}
	        }
	    }
	}
}